export const mapMixins={
    data(){
      return{
          needLine:false,//如果需要画线功能，须在组件内定义此变量为true
          lineStart:'',//起
          lineEnd:'',//止
          checkedList:[]//已选中的数据
      }
    },
    methods:{
        //混入后须重写该方法，用于请求数据以及赋值到orderForMap
        getOrderForMap() {
            throw new Error('component must implement handlePlaylist method')
        },
        //必须点键值，id，sameMark，若显示图片不显示点必须传入type，若使用template渲染，必须传入status,其他参数自定义
        initPoints(showImg){
            //初始点位
            this.checkedList = [];
            this.$refs.map.clearLines();
            this.markers = [];
            for (let i = 0, length = this.orderForMap.length; i < length; i++) {
                //判断是否有相同经纬度的重复点
                let isSame=false,sameIndex;
                for(let k=0,marklen=this.markers.length;k<marklen;k++){
                    if(this.orderForMap[i][this.lineStart+'_lon']===this.markers[k]['position'][0]&&this.orderForMap[i][this.lineStart+'_lat']===this.markers[k]['position'][1]){
                        sameIndex=k;
                        isSame=true;
                        break;
                    }
                }
                if(isSame){
                    let parentId=this.markers[sameIndex]['id'],parentType=showImg===true?this.markers[sameIndex]['type']:this.markers[sameIndex]['status'],
                        endTime=this.markers[sameIndex]['endTime'];
                    this.markers[sameIndex]['id']=this.orderForMap[i]['id'];//这里要把最上面渲染的物品id提出，因为最后一次渲染的物品点会被触发点击
                    this.markers[sameIndex]['sameMark'].push({
                        status: parentType,
                        id: parentId,
                        endTime:endTime
                    });
                    if(showImg){
                        this.markers[sameIndex]['type']=this.orderForMap[i]['dispatch_status'];
                    }else{
                        this.markers[sameIndex]['status']=this.orderForMap[i]['status'];
                        this.markers[sameIndex]['endTime']=this.orderForMap[i]['limit_time'];
                    }
                }else{
                    let newMark={
                        position: [this.orderForMap[i][this.lineStart+'_lon'], this.orderForMap[i][this.lineStart+'_lat']],
                        id: this.orderForMap[i]['id'],
                        sameMark:[],
                    };
                    if(showImg){
                        newMark.type=this.orderForMap[i]['dispatch_status'];
                        newMark.template="";
                    }else{
                        newMark.status=this.orderForMap[i]['status'];
                        newMark.endTime=this.orderForMap[i]['limit_time'];
                        newMark.template=`<div class="mission-box" @click="templateClick(${this.orderForMap[i]['id']})"><p><span>${this.getMins(this.orderForMap[i]['limit_time'])}</span> 取 30</p></div>`;
                    }
                    this.markers.push(newMark);

                }

            }
            console.info('this.markers',this.markers);
        },
        getIndexInMap(id){
            for (let i = 0, length = this.orderForMap.length; i < length; i++) {
                if (this.orderForMap[i]['id'] == id) {
                    return i;
                }
            }
            return null;
        },
        listMapCheck(id,find) {
            // console.info('xuan', id,find);
            //获取当前索引
            let index=this.getIndexInMap(id);
            if (isNaN(index)) {
                this.$message.error("数据获取失败，请刷新后重试");
                return;
            }

            //设置画线以及是否选中
            if (!this.orderForMap[index]['checked']) {
                //画线
                if(this.needLine&&!!this.$refs.map){
                    this.$refs.map.addLine([+this.orderForMap[index][this.lineStart+'_lon'], +this.orderForMap[index][this.lineStart+'_lat']],
                        [+this.orderForMap[index][this.lineEnd+'_lon'], +this.orderForMap[index][this.lineEnd+'_lat']], id);
                }

                Vue.set(this.orderForMap[index],'checked',true);
                this.checkedList.push(id);
                //排序
                // this.orderForMap[index]['checked'] = true;
                // this.orderForMap.unshift(this.orderForMap[index]);
                // this.orderForMap.splice(index + 1, 1);
            }else {
                //删除线
                if(this.needLine&&!!this.$refs.map) {
                    this.$refs.map.removeLine(id);
                }

                Vue.set(this.orderForMap[index],'checked',false);
                this.checkedList.splice(this.checkedList.indexOf(id),1);
                //排序
                // this.orderForMap[index]['checked'] = false;
                // this.orderForMap.sort(function (a, b) {
                //     if (!a['checked'] && b['checked']) {
                //         return 1;
                //     }
                //     if (a['checked'] && !b['checked']) {
                //         return -1;
                //     }
                //     return 0;
                // })
            }
            //只有地图点击触发
            if(find){
                //找到当前点
                for(let i=0,len=this.markers.length;i<len;i++){
                    if(this.markers[i]['id']==id){
                        //查看子集是否存在
                        if(!!this.markers[i]['sameMark']&&this.markers[i]['sameMark'].length>0){
                            for(let k=0,length=this.markers[i]['sameMark'].length;k<length;k++){
                                this.listMapCheck(this.markers[i]['sameMark'][k]['id']);
                            }
                        }
                        break;
                    }
                }
            }
        },
        getMins:function(date){
            let mss=new Date(date).getTime()-Date.now(),days = Math.abs(parseInt(mss / (1000 * 60 * 60 * 24)));
            if(mss<0){
                return `已超时${days}天`;
            }else{
                let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
                return `${days}天${hours}时${minutes}分`;
            }
        }
    }
}
